首先，要先確保電腦有裝環境有 node.js，要 20.x 或更新才可以安裝 nuxt

（當不同專案使用不同的 node 版本時，可以用 nvm 來切換 node 版本）

// 查看目前nvm有安裝過什麼版本和目前使用的版本
nvm ls

// 安裝該版本
nvm install 20.18.0

// 手動指定使用該版本號
nvm use 20.18.0

安裝 Nuxt

npm create nuxt@latest <project-name>

cd到對的資料夾，輸入指令，要打y和按enter，然後就會開始下載很多東西

會問一些問題，選擇後按enter，就會完成

npm run dev

可以 npm run dev，看看有什麼錯誤，打開 localhost 如果有就是起成功了

如果有錯誤，可能是安裝版本不相容之類的(?，可以去看 package.json 中的版本，copilot 說 nuxt 4 較不穩定，建議安裝 nuxt 3

// package.json

{
  "name": "nuxt-app",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.10.1",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  }
}

只要有改動 package.json 就要重新安裝一次，指令如下：

// 移除舊有的已安裝設定
rm -rf node_modules package-lock.json .nuxt

// 重新安裝
npm install

安裝Vuetify UI 套件和一些有的沒有

npm install vuetify @mdi/font sass sass-loader vite-plugin-vuetify

• vuetify: Vue 的 UI 元件框架。
• @mdi/font: Material Design Icons 的字型版套件。
• sass: CSS 預處理器。
• sass-loader: webpack / Vite 的 loader，幫助編譯 .scss / .sass → 瀏覽器可讀的 CSS。
• vite-plugin-vuetify: 在 Vite 環境中正確載入 Vuetify 的官方插件，讓以上可以正常運作。

這時候會增加一個 nuxt.config.ts 檔案

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    plugins: [vuetify()],
  },
})

也會有 plugins/vuetify.ts （取名、路徑要對不然會吃不到）

import { createVuetify } from 'vuetify'
import { defineNuxtPlugin } from 'nuxt/app'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: { mdi },
    },
    theme: {
      defaultTheme: 'light',
    },
  })
  nuxtApp.vueApp.use(vuetify)
})

此時的資料夾結構會有

注意：app.vue 要在根目錄，不然吃不到的樣子，試試看在檔案中加上 vuetify 元件看有沒有顯示出來

如果過程中有一些明明裝了，但畫面還是沒有顯示，有可能是快取或安裝問題。可以 rm -rf node_modules package-lock.json .nuxt > npm install > npm run dev，再試試看！

預備好理想的資料夾結構

• api: 集中管理 API 請求邏輯，例如 axios instance、router 封裝。通常會把api router寫在這裡。
• assets：靜態資源（icons、scss、constants）。
  • icons：統一存放專案圖示，方便管理與更新。
  • scss：集中管理樣式變數與共用樣式。
  • constants：如表格欄位、下拉選單等固定參數。
• components：放置可重複使用的 Vue 元件（如按鈕、卡片）。
• pages：Nuxt 內建的頁面路由系統，每個 .vue 對應一個路徑。
• plugin ：第三方套件或自定義插件的注入點。
• public：靜態檔案（favicon、robots.txt）。
• store：集中管理應用狀態（類似 Vuex），API 回來的資料暫存在 store，避免多次請求。
• app.vue：應用程式的根元件。
• nuxt.config.ts：Nuxt 全域設定。
• package.json：專案依賴的套件總覽與 script。
• README.md：專案說明文件。

資料夾結構各個專案也會有些微不同，但大概都會有以上這幾個重點資料夾。

總覽 package.json

{
  "name": "nuxt-app",
  "type": "module",
  "private": true,
  "scripts": {                   // 一組快速指令，幫助你跑開發、打包、預覽
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {             // 網站跑起來必須要的「零件」
    "@mdi/font": "^7.4.47",
    "nuxt": "^3.10.1",
    "vite-plugin-vuetify": "^2.0.1",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5",
    "vuetify": "^3.5.2"
  },
  "devDependencies": {         // 開發時才需要的「工具」
    "@nuxtjs/style-resources": "^1.2.2",
    "sass": "^1.91.0",
    "sass-loader": "^16.0.5"
  }
}

官方文件

https://nuxt.com/docs/4.x/getting-started/installation
https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3